前言

接下來來詳細介紹 Flex Container 的屬性吧！
讀下來發現每個屬性都牽涉很多，所以我會分成幾篇來詳細介紹它們。

Flex Container 屬性

flex - direction屬性

昨天有提到兩軸概念，不論是要控制佈局方向由上而下、由下而上，抑或是由左至右、由右至左，都是透過設定flex - direction屬性控制彈性容器主軸的方向，指定如何將彈性項目放置在彈性容器中，這也決定了彈性項目的佈局方向。

假設書寫模式由左至右：

圖片來自這裡

flex - direction: row

row為預設值，看起來與inline元素或是浮動元素相似，但其實不是。上圖範例是假設書寫方向由左到右，所以row藉由此時語言的書寫模式由左到右水平排列。

flex - direction: row-reverse

反轉row的main start跟main end的排列方向。

flex - direction: column

column值會將彈性容器的主軸設為與目前書寫模式的區塊軸相同的方向，英語等水平書寫模式的區塊軸就是垂直軸，而在日文等垂直書寫模式下則是水平軸。
項目會由上而下排列。

flex - direction: column-reverse

與column相反，項目由下而上排列。

注意： 要更改書寫方向，不要用 flex - direction 將版型改為由右至左的語言，應該使用dir屬性（attribute）或是writing-mode 屬性。

flex - wrap

如果彈性容器的主軸無法容納所有的彈性項目，預設情況下彈性項目不會折行，也不會對尺寸做任何調整，而是在彈性項目的flex屬性允許時縮小或溢出彈性容器的邊界。
藉由flex - wrap可以決定發生的行為，允許彈性項目折行（多行/欄的彈性項目），而非溢出容器，或是為了維持在一行之內縮小。

控制了彈性容器是否限制為只允許一行的的彈性項目，或是必要時擴充為多行

圖片來自這裡

flex - wrap: nowrap

nowrap為預設值，彈性項目排在一行中，這可能會導致超過容量的彈性容器溢位。方向取決於 flex - direction 的值。

flex - wrap: wrap

彈性項目分成多行。方向取決於當前的書寫模式（writing mode）以及 flex - direction 的值。
當交叉軸（cross axis）對row與row-reverse的方向是由上到下，對column與column-reverse則是水平方向。

flex - wrap: wrap - reverse

原理與wrap屬性值類似，但增加的彈性行是在原有行之前而非之後，看起來會是與wrap上下反轉。

參考資料

書籍<CSS大全第四版>
Mdn - flex - direction屬性 & flex - wrap屬性